<template>
  <div class="ranklist-block">
    <div class="rank-tab">
      <div class="check-tab" v-for="(rankTab, index) in rankTab" :key="index" @click="checkTab(rankTab.type)" v-bind:class="{ active: rankTab.checked }">
        <span>{{rankTab.name}}</span>
      </div>
    </div>

    <div>
      <div class="rank-condition">
        <div class="cd-center">
          <span class="cd-left" :class="{active:rankSubType === 'daily'}" @click="changeRankSubType('daily')">日榜</span>
          <span class="cd-right" :class="{active:rankSubType === 'all'}" @click="changeRankSubType('all')">总榜</span>
        </div>
      </div>
      <div>
        <div class="check-date">
          <span class="opentime">
            <img src="../../../../../assets/img/open-icon.png" alt="">
          </span>
          <el-date-picker
            v-model="punchDate"
            :picker-options="pickerOptions"
            :disabled="pickerDisabled"
            type="date"
            placeholder="请选择时间"
            class="user-input"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="getRankList" />
        </div>
        <div class="rank-name">{{ campInfo.camp_name }}</div>
        <div class="camp-days">{{ campInfo.rank_current_day }} <i>{{ campInfo.rank_title }}</i></div>
        <div class="rank-column">
          <span class="column-left">{{ campInfo.rank_column3 }}</span>
          <span class="column-right">{{ txtMsg }}</span>
        </div>
      </div>
      <div class="rank-list-content" v-if="rankTotal != 0">
        <div class="camp-rank-list" v-for="(item, index) in rankList" :key="index">
          <div class="rank-num">
            <span class="num-icon" v-if="item.rank === 1"><img src="../../../../../assets/img/first.png" alt=""></span>
            <span class="num-icon" v-else-if="item.rank === 2"><img src="../../../../../assets/img/scend.png" alt=""></span>
            <span class="num-icon" v-else-if="item.rank === 3"><img src="../../../../../assets/img/third.png" alt=""></span>
            <span v-else>{{ item.rank }}</span>
          </div>
          <div class="rank-header" v-if="item.avatar!== ''" v-bind:class="{first:item.rank === 1, second:item.rank === 2, third:item.rank === 3}">
            <img :src="item.avatar" width="70">
          </div>
          <div class="rank-header" v-else v-bind:class="{first:item.rank === 1, second:item.rank === 2, third:item.rank === 3}">
            <img src="../../../../../assets/img/timg.jpg" alt="">
          </div>
          <div class="rank-username">
            {{item.user_name}}
          </div>
          <div class="rank-health-num">
            {{item.value}}
          </div>
        </div>
      </div>
      <div class="empty-rank" v-else>
        <div class="empty-img">
          <img src="../../../../../assets/img/empty.png" alt="">
        </div>
        <div class="empty-text">
          暂时没有排行榜内容
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatTime } from '@/utils/'

export default {
  components: {
    
  },
  data() {
    return {
      loading: false,
      rankList: [],
      punchDate: '',
      txtMsg: '获得健康币',
      page: 1,
      rankTab: [
        { name: '减重榜', type: 'weight', checked: true },
        { name: '健康值榜', type: 'point', checked: false },
        { name: '活跃榜', type: 'active', checked: false },
        // { name: '饮食榜', type: 'diet', checked: false },
        // { name: '早起榜', type: 'getup', checked: false }
      ],
      rankType: 'weight',
      rankSubType: 'daily',
      campInfo: {},
      rankTotal: 0,
      pickerDisabled: false,
      pickerOptions: {
        disabledDate: time => {
          return (time.getTime() < new Date(this.campInfo.start_date) - 8.64e7) || (time.getTime() > Date.now())
        }
      }
    }
  },
  created() {
    this.punchDate = formatTime(new Date(), 'yyyy-MM-dd')
  },
  methods: {
    initData(campId) {
      this.campId = campId
      this.getRankList()
    },
    getRankList() {
      this.loading = true
      this.$api.order.camp
        .getRankData({
          params: {
            page: this.page,
            camp_id: this.campId,
            type: this.rankType,
            sub_type: this.rankSubType,
            date: this.punchDate
          }
        }).then(res => {
          if (res.data.length !== 0) {
            this.loading = false
            this.rankList = res.data.list
            this.campInfo = res.data.camp_detail
            this.rankTotal = res.data.total
            this.pickerDisabled = false
            if (!this.campInfo.start_Date) {
              this.pickerDisabled = true
            }
          } else {
            this.loading = false
          }
        }).catch(err => {
          console.log(err)
        })
    },
    checkTab(type) {
      this.rankType = type
      this.rankSubType = 'daily'
      this.getRankList()

      if (type === 'diet') {
        this.txtMsg = '获得健康币'
      } else if (type === 'getup') {
        this.txtMsg = '时间'
      } else if (type === 'weight') {
        this.txtMsg = '减重(kg)'
      } else {
        this.txtMsg = '获得健康币'
      }
      for (var i = 0; i < this.rankTab.length; i++) {
        this.rankTab[i].checked = false
        if (type === this.rankTab[i].type) {
          this.rankTab[i].checked = true
          switch (this.rankTab[i].type) {
            case 'health':
              this.rankType = 'health'
              this.rankSubType = 'daily'
              break
            case 'diet':
              this.rankType = 'diet'
              this.rankSubType = 'daily'
              break
            case 'getup':
              this.rankType = 'getup'
              this.rankSubType = 'daily'
              break
            case 'weight':
              this.rankType = 'weight'
              this.rankSubType = 'daily'
              break
          }
        }
      }
    },
    changeRankSubType(rankSubType) {
      this.rankSubType = rankSubType
      this.getRankList()
    }
  }
}
</script>

<style>
  .check-tab{
    display: inline-block;
    padding: 0 15px;
    font-size: 17px;
    color: #666666;
    line-height:1.6;
    padding-bottom: 2px;
  }
  .check-tab.active{
    color: #000;
  }
  .check-tab.active span{
    border-bottom:2px solid #000;
    padding-bottom:5px;
  }
  .camp-rank-list{
    margin-bottom: 10px;
  }
  .rank-tab{
    text-align: center;
    margin:10px 0;
    border-bottom:1px solid #efefef;
  }
  .rank-condition{
    text-align: center;
    margin: 20px 0;
  }
  .cd-center{
    display: inline-block;}
  .cd-center{
    font-size: 15px;
    padding: 8px 20px;
    border: 1px solid #666;
    border-radius: 20px;
  }
  .cd-left{
    border-right:1px solid #666;
    padding-right:10px;
  }
  .cd-left.border{
    border:0;
    padding:0;
  }
  .cd-right{
    padding-left:10px;
  }
  .cd-right.padding{
    padding:0;
  }
  .cd-center span.active{
    color: #8148f8;
  }
  .rank-name,.camp-days{ text-align: center;line-height: 1.8;}
  .rank-name{
    font-size:17px; color:#8148f8; }
  .camp-days{
    font-size: 15px;
  }
  .rank-column{
    padding:20px 15px;
    font-size:15px;
  }
  .column-right{
    width: 125px;
    display: inline-block;
    text-align: center;
  }
  .column-left{
    padding-left: 40px;
  }
  .camp-rank-list{
    padding:0 15px;
  }
  .camp-rank-list div{
    display:inline-block;
    font-size: 15px;
  }
  .camp-rank-list .rank-health-num{
    font-size: 16px;
  }
  .rank-health-num{
    margin-top: 16px;
    float: right;
    width: 120px;
    text-align: center;}
.rank-username{
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #999;}
  .rank-num{ width: 20px;
    height:20px;
  background: #bebebe;
  color: #999999;
  text-align: center; line-height: 20px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;}
  .num-icon img{ width: 20px;    vertical-align: middle;}
  .rank-header img{
    width:50px;
  height: 50px;
    vertical-align: middle;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    border:#fff;
  }
  .rank-header.first img{
    border:2px solid rgba(244, 217, 65, 0.8)
  }
  .rank-header.second img{
    border:2px solid rgba(209, 223, 232, 0.8)
  }
  .rank-header.third img{
    border:2px solid rgba(206, 147, 128, 0.8)
  }
  .rank-header{ padding: 0 10px;}
  .column-right i{ font-style: normal; font-size: 13px; color: #aeabab;}
  .camp-days i{ font-style: normal; font-size: 13px; color: #f7ba2a;}
  .check-date .el-input__inner{ border:0; width: 100%;}
  .check-date{margin: 15px 0; position: relative; text-align: center;padding: 0 20px;
    box-sizing: border-box;}
  .check-date .el-date-editor.el-input{border-bottom: 1px solid #bfcbd9;width: 100%;}
  .check-date .el-input__icon{
    opacity:0;}
  .check-date .opentime{position: absolute;
    right: 30px;
    z-index: 99;
    top: 15px;}
  .check-date .opentime img{ width: 15px;}
  .empty-img ,.empty-text{
    text-align: center;
    font-size: 15px;
    color: #666;
  }
  .empty-img{ text-align: center; }
  .empty-img img {
    width:100px;}
  .empty-rank{ margin: 40px 0 60px 0;}
  .rank-list-content{    max-height: 500px; overflow: auto;}
  .rank-list-content::-webkit-scrollbar {
    display: none;
  }
</style>
